import styles from './style.less';
interface SpotPreviewProps {
  bgColor: string;
  member?: boolean;
  arrear?: boolean;
  offline?: boolean;
  plateNumber?: string;
}

const SpotPreview = (props: SpotPreviewProps) => {
  const {
    bgColor,
    member = false,
    arrear = false,
    offline = false,
    plateNumber = '空闲泊位',
  } = props;
  return (
    <div
      className={styles.spotPreview}
      style={{
        background: bgColor,
      }}
    >
      {offline && (
        <i title="地磁离线状态显示" className={styles.sensorImg}>
          离
        </i>
      )}
      {arrear && (
        <i title="泊位在停车牌欠费时显示" className={styles.arrearImg}>
          欠
        </i>
      )}
      {member && (
        <i
          title="泊位在停车牌为会员车牌时显示"
          className={styles.memberImg}
          style={{
            top: arrear ? '33px' : '3px',
          }}
        >
          包
        </i>
      )}
      <span className={styles.spotId}>泊位编号</span>
      <span className={styles.plateNumber}>{plateNumber}</span>
    </div>
  );
};

export default SpotPreview;
